<template>
  <div class="waterfall" ref="waterfall">
    <slot></slot>
    <!-- 显示加载更多 -->
    <div class="waterfall-loading" v-show="isLoading">
      <i class="el-icon-loading"></i> 等待加载
    </div>
  </div>
</template>

<script>
import { throttle } from "throttle-debounce";

export default {
  name: "Waterfall",

  data() {
    return {
      // 保存加载状态，默认不加载
      isLoading: false,
    };
  },

  // 页面挂载完成，去注册事件
  mounted() {
    // 事件监听器，监听滚动事件，fn函数在methods中
    // window.addEventListener("scroll", this.scroll);

    // 使用节流，对应高频事件一段时间执行一次
    // scrollHandle 自定义方法
    this.scrollHandle = throttle(1000, this.scroll.bind(this));
    window.addEventListener("scroll", this.scrollHandle);
  },
  // 销毁组件前
  beforeDestroy() {
    // 注销滚动事件
    window.removeEventListener("scroll", this.scrollHandle);
  },
  methods: {
    // 滚动时执行的函数
    scroll() {
      // 如果当前已经是加载中，直接返回，不做其他操作，等待数据加载完成
      if (this.isLoading) return;

      // 否则，往下走
      // 判断 列表底部 距离 窗口顶部的距离 与视窗高度比较
      const s = this.$refs.waterfall.getBoundingClientRect().bottom;
      const h = document.documentElement.clientHeight;
      if (s < h) {
        // console.log(123);
        // 显示加载更多
        this.isLoading = true;
        // 定义自定义事件 加载更多
        this.$emit("loading-more");
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.waterfall-loading {
  color: #888;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}
</style>